<template>
  <div>
    <top-header :title="tourScenicName"></top-header>
    <information v-if="showPageName === 'information'"
                 class="animated"
                 :list="ScenicActicleList"
                 :class="showPageName === 'information'?'bounceInUp':''"
                 @close="closePageFn" />
    <scenicDetails v-if="showPageName === 'scenicDetails'"
                   class="animated"
                   :class="showPageName === 'scenicDetails'?'bounceInUp':''"
                   :isPoint="isPoint"
                   :info="tourScenicInfo"
                   :pointInfo="pointInfo"
                   @close="closePageFn" />
    <div style="border-radius: 0rem 0rem 0.241546rem 0.241546rem;"
         class="po_re">
      <div class="ys-tabs fx-items-center">
        <div class="tab-unit po_re"
             v-for="(item, index) in swipeList"
             :key="index"
             @click="switchTabs(item.id)">
          <div :class="Number(itemTypeId) === Number(item.id)?'select':''">
            {{item.name}}
          </div>
          <img v-if="Number(itemTypeId) === Number(item.id)"
               src="../../assets/icon/xiahuaxian.png"
               alt="">
        </div>

      </div>
      <audio id="myaudio1"
             ref="music"
             preload
             @ended="closePointPlay"></audio>
      <div class=" fx-items-center fx-between commentary po_ab"
           v-if="audioTips && !isShelter">

        <div class="size-18 text">
          <img src="../../assets/icon/yinliang.png"
               alt="">
          正在播放{{pointInfo.name}}简介
        </div>
        <img src="../../assets/icon/close.png"
             @click="closePointPlay"
             style="width:13px;height:13px">
      </div>
    </div>

    <div id="container"
         style="min-height:78vh"> </div>

    <div class="po_fi bottom-button ">
      <div class="fx-center fx-items-center box">
        <div class="unit fx-center fx-items-center"
             @click="showPageFn('scenicDetails',false)">
          景区概况
        </div>
        <div style="background-color:#E3E3E3;height:50%;width:1px"></div>
        <div class="unit fx-center fx-items-center"
             @click="openRouteDialog">
          游览路线
        </div>
        <div style="background-color:#E3E3E3;height:50%;width:1px"></div>
        <div class="unit fx-center fx-items-center"
             @click="showPageFn('information',false)">
          景区资讯
        </div>
      </div>

    </div>

    <div v-if="describeDialog"
         @click.stop="closeDialog"
         class="po_fi modal">
      <div class="po_ab dialog animated"
           @click.stop
           :class="describeDialog?'bounceInUp':''">
        <div class="size-18 weight-700 title">
          {{pointInfo.name}}
        </div>
        <div class="fx-items-center fx-between content">
          <div class="content-img"
               @click="showPageFn('scenicDetails',true)">
            <img :src="pointInfo.img[0]"
                 alt="">
          </div>
          <div class="fx-column fx-between content-text"
               @click="showPageFn('scenicDetails',true)">
            <div class="describe display-txt-two">
              {{pointInfo.intro}}
            </div>
            <div class="fx-items-center"
                 style="margin-left:3px">
              <div class="red-button"
                   v-if="pointInfo.media_url"
                   @click.stop="commentaryFn">
                解说
              </div>
              <div class="blue-button"
                   @click.stop="routePlanning()">
                去这里
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="routeDialog"
         @click.stop="closeDialog"
         class="po_fi modal">
      <div class="po_ab dialog animated"
           @click.stop
           :class="routeDialog?'bounceInUp':''">
        <div class="size-18 weight-700 title">
          路线选择
        </div>
        <div class=" fx-column route-box">
          <div v-for="(item,index) in scenicLineList"
               :key="index"
               class="fx-items-center fx-between m-t-20 fx-1">
            <div class="size-14 left">
              {{item.name}}<span class="size-12">（建议游览时长：{{item.duration}}天）</span>
            </div>
            <div class="size-14 fx-items-center fx-center button"
                 @click.stop="meshLineFn(item)">
              选这条
            </div>
          </div>
          <van-empty v-if="scenicLineList.length === 0"
                     description="暂无路线" />
        </div>
      </div>
    </div>
    <div v-if="routeDetailsDialog"
         @click.stop="closeDialog"
         class="po_fi modal">
      <div class="po_ab dialog animated"
           @click.stop
           :class="routeDetailsDialog?'bounceInUp':''">
        <div class="size-18  title1">
          <div class="weight-700">
            {{scenicLineCurrent.name}}
          </div>
          <div class="size-14 m-t-5">
            途径{{scenicLineCurrent.tour_scenic_item_id_arr.length}}个景点 | {{scenicLineCurrent.distance}}公里 | 建议游览时长{{scenicLineCurrent.duration}}天
          </div>
        </div>
        <div class="m-t-15 flex-1 fx-items-center route-line m-b-25">
          <div class="flex-1 fx-items-center"
               v-for="(item,index) in scenicLineCurrent.tour_scenic_item_name_arr"
               :key="index">
            <div class="fx-column fx-items-center">
              <div class="aside-unit fx-items-center fx-center">
                {{index + 1}}
              </div>
              <div class="size-14 m-t-10">
                {{item}}
              </div>
            </div>
            <img v-if="index < scenicLineCurrent.tour_scenic_item_name_arr.length -1"
                 src="../../assets/icon/xian.png"
                 class="split-line ">
          </div>

        </div>
      </div>
    </div>

  </div>

</template>
<!--引入UI组件库（1.1版本） -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
<script>
import { Toast } from 'vant';
import TopHeader from '@/components/TopHeader';
import information from './information.vue';
import scenicDetails from './scenicDetails.vue';

export default {
	name: 'scenicSpotMap',
	components: {
		TopHeader,
		information,
		scenicDetails,
	},
	data() {
		return {
			selectId: 0,
			swipeList: [],
			itemTypeId: '',
			isPoint: false,
			scenic_id: '', //景区id
			tourScenicInfo: null, //景区信息
			tourScenicName: '',
			audioTips: false,
			music: null,
			map: null,
			markers: [],
			markerList: [],
			object3Dlayer: null,
			meshRoute: null,
			openDescribe: false,
			describeDialog: false,
			routeDialog: false,
			routeDetailsDialog: false,
			cluster: null, //点聚合
			pointInfo: null, //点信息
			isShelter: false, // 是否显示主页面
			showPageName: '', //显示页面的name
			ScenicActicleList: [], //咨询列表
			scenicLineList: [], //线路列表
			scenicLineCurrent: null, //当前使用的路线
			pathPointList: [], //路径点
			walking: null, //路线规划

			spotId: '', //景点类型id
			spotAnchorList: [],
		};
	},
	mounted() {
		Toast.loading({
			message: '加载中...',
			forbidClick: true,
		});
		//初始化音频
		this.music = document.getElementById('myaudio1');

		// 获取景区中景点类型列表
		_api
			.api_userPortal_tourScenicItemType_getListByCon({
				tour_scenic_ids: this.$route.query.tour_scenic_id,
				town_id: this.$route.query.town_id,
				is_paginate: 0,
			})
			.then((res) => {
				console.log(JSON.stringify(res));
				this.swipeList = res.data;
				if (res.data.length > 0) {
					this.itemTypeId = res.data[0].id;
					this.spotId = res.data[0].id;
				} else {
					this.itemTypeId = '';
				}
				//获取景点列表
				_api
					.api_userPortal_tourScenicItem_getListByCon({
						scenic_id: this.$route.query.tour_scenic_id,
						is_paginate: 0,
						scenic_item_type_id: this.itemTypeId,
					})
					.then((res) => {
						this.markerList = res.data;
						//加载高德地图JS
						this.loadScript(
							'https://webapi.amap.com/maps?v=1.4.15&key=c8ba837d982c156d8e3597e6c021fe90&plugin=AMap.MarkerClusterer,AMap.Walking,AMap.Geolocation',
							() => {
								// 获取景区详情
								_api
									.api_userPortal_tourScenic_getById({
										tour_scenic_id: this.$route.query.tour_scenic_id,
										level: 'label',
									})
									.then((res) => {
										//添加 自定义图层
										let imageLayer = new AMap.ImageLayer({
											url: res.data.map_img,
											bounds: new AMap.Bounds(
												res.data.map_img_south_west.split(','),
												res.data.map_img_north_east.split(','),
											),
											zooms: [10, 20],
										});
										this.tourScenicInfo = res.data;
										this.tourScenicName = res.data.name;
										this.initMap(imageLayer);
									})
									.catch((err) => {});
							},
						);
					})
					.catch((err) => {});
			})
			.catch((err) => {});

		this.init();
	},
	methods: {
		init() {
			//获取景区咨询
			_api
				.api_userPortal_tourScenicActicle_getListByCon({
					scenic_id: this.$route.query.tour_scenic_id,
					is_paginate: 0,
					level: ' ',
				})
				.then((res) => {
					this.ScenicActicleList = res.data;
				})
				.catch((err) => {});
			//获取 景区线路
			_api
				.api_userPortal_tourScenicLine_getListByCon({
					tour_scenic_id: this.$route.query.tour_scenic_id,
					is_paginate: 0,
				})
				.then((res) => {
					this.scenicLineList = res.data;
				})
				.catch((err) => {});
		},
		initMap(imageLayer) {
			//处理 点标记
			this.handleMarkerFn();

			//初始化地图
			this.map = new AMap.Map('container', {
				resizeEnable: true, //是否监控地图容器尺寸变化
				viewMode: '3D',
				features: ['bg', 'road'],
				center: this.tourScenicInfo.map_img_center.split(','), //初始化地图中心点
				layers: [new AMap.TileLayer(), imageLayer],
			});
			// //该demo可模拟水印效果
			// let self = this;
			// var layer = new AMap.TileLayer.Flexible({
			// 	cacheSize: 30,
			// 	opacity: 1,
			// 	createTile: function (x, y, z, success, fail) {
			// 		var img = document.createElement('img');
			// 		img.src = self.getloaclTileUrl(x, y, z);
			// 		img.crossOrigin = 'anonymous'; //3D 的时候添加，同时图片要有跨域头

			// 		img.onload = function () {
			// 			success(img);
			// 			console.log(img);
			// 		};
			// 		img.onerror = function () {
			// 			console.log(111);
			// 			fail();
			// 		};
			// 		console.log(self.getloaclTileUrl(x, y, z));
			// 	},
			// });
			// layer.setMap(this.map);
			this.map.setFitView([imageLayer]);
			this.map.setZoom(this.map.getZoom() + 1);
			this.renderMarkerFn();
			Toast.clear();
		},
		// 获取本地瓦片
		// getloaclTileUrl(x, y, z) {
		// 	var tileUrl = 'https://mlxch5.tx2.isart.me/tiles/{z}/tile-{x}_{y}.png';
		// 	tileUrl = tileUrl.replace(/\{x\}/, x);
		// 	tileUrl = tileUrl.replace(/\{y\}/, y);
		// 	tileUrl = tileUrl.replace(/\{z\}/, z);

		// 	return tileUrl;
		// },

		//处理点标记数组
		handleMarkerFn() {
			this.markerList.map((item) => {
				// 点标记显示内容，HTML要素字符串
				var markerContent =
					'<div style="display: flex;flex-direction: column;align-items: center;position: relative;z-index:10;left:-50%;padding: 0.241546rem;"><img src="' +
					require('@/assets/image/location_icon.svg') +
					'" style="width: .7rem;height: .7rem;margin-bottom: 3px;"><div style="font-size: 0.289855rem;white-space:nowrap;">' +
					'<div style="background-color: white;padding:4px 14px;border-radius: 20px;border: 1px solid #dedede;color:#EB5F3E;font-weight:bold;">' +
					item.name +
					'</div>';
				('</div>');
				// `<div id="${item.id}spot" class="hide spotAnchor" style="position: absolute;top: -0.845411rem;display: flex;justify-content: center;font-size: 0.386473rem;font-weight: 700 !important;border: 0.048309rem solid #6899f4;padding: 0.120773rem 0.241546rem;background-color:#fff;border-radius: 0.241546rem;color: #6899f4;white-space:nowrap;z-index：10">` +
				// '<img src="https://upqiniu.tx2.isart.me/1631686207983jce2tzrs.png" style="width: 0.483092rem;height: 0.483092rem;margin-right: 0.120773rem;">去这里' +
				// '<div style="display: block;border-width: 0.241546rem;position: absolute;bottom: -0.483092rem;border-style: solid dashed dashed;border-color: #6899f4 transparent transparent;font-size: 0;line-height: 0;"></div>' +
				// '<div style="display: block;border-width: 0.241546rem;position: absolute;bottom: -0.410628rem;border-style: solid dashed dashed;border-color: #fff transparent transparent;font-size: 0;line-height: 0;"></div>' +
				// ' </div></div>';

				var marker = new AMap.Marker({
					position: new AMap.LngLat(item.lon, item.lat),
					// 将 html 传给 content
					content: markerContent,
					// 以 icon 的 [center bottom] 为原点
					extData: item,
					offset: new AMap.Pixel(-15, -15),
				});
				marker.on('click', (e) => this.infoOpenFn(e, item));
				this.spotAnchorList.push(`${item.id}spot`);
				this.markers.push(marker);
			});
		},
		// 渲染点标记
		renderMarkerFn() {
			//处理点标记 --- 点聚合
			var count = this.markers.length;
			  var _renderClusterMarker = function (context) {
			    var factor = Math.pow(context.count / count, 1 / 18);
			    var div = document.createElement('div');
			    var Hue = 180 - factor * 180;
			    var bgColor = 'white';
			    var fontColor = '#EB5F3E';
			    var borderColor = '#EB5F3E';
			    var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
			    // div.style.backgroundColor = bgColor;
			    var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
			    div.style.width = div.style.height = size + 'px';
			    // div.style.border = 'solid 1px ' + borderColor;
			    div.style.borderRadius = size / 2 + 'px';
			    // div.style.boxShadow = '0 0 1px ' + shadowColor;
			    div.innerHTML = context.count;
			    div.style.lineHeight = size + 'px';
			    // div.style.color = fontColor;
			    div.style.fontSize = '20px';
			    div.style.textAlign = 'center';
			    // div.style.backgroundImage = '../../assets/icon/icon_jingdian.png'
			    div.style.backgroundImage = 'https://upqiniu.tx2.isart.me/1631686207983jce2tzrs.png'
			    context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
			    context.marker.setContent(div);
			  };
			var sts = [
				{
					url: require('@/assets/icon/icon_jingdian.svg'),
					size: new AMap.Size(32, 32),
					offset: new AMap.Pixel(-16, -16),
				},
				{
					url: require('@/assets/icon/icon_jingdian.svg'),
					size: new AMap.Size(36, 36),
					offset: new AMap.Pixel(-18, -18),
				},
				{
					url: require('@/assets/icon/icon_jingdian.svg'),
					size: new AMap.Size(48, 48),
					offset: new AMap.Pixel(-24, -24),
				},
				{
					url: require('@/assets/icon/icon_jingdian.svg'),
					size: new AMap.Size(48, 48),
					offset: new AMap.Pixel(-24, -24),
				},
			];
			this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
                styles:sts,
				gridSize: 80,
				// renderClusterMarker: _renderClusterMarker,
			});
		},
		//清除点标记
		removeMarkerFn() {
			this.cluster.clearMarkers();
			this.markers = [];
		},

		//点标记 点击事件
		infoOpenFn(e, item) {
			this.pointInfo = JSON.parse(JSON.stringify(e.target.getExtData()));

			if (this.itemTypeId === this.spotId && !item.url) {
				this.describeDialog = true;
				this.openDescribe = true;
			} else {
				location.href = item.url;
				document.getElementsByClassName('spotAnchor').forEach((element) => {
					if (element.id === `${this.pointInfo.id}spot`) {
						element.classList.remove('hide');

						if (element.eventList === undefined) {
							element.eventList = {};
						}
						for (var key in element.eventList) {
							if (key === 'click') {
								return;
							}
						}
						//添加点击事件
						document.getElementById(`${this.pointInfo.id}spot`).addEventListener('click', (e) => {
							this.routePlanning();
						});
						element.eventList['click'] = true;
					} else {
						element.classList.add('hide');
					}
				});
			}
		},

		openRouteDialog() {
			this.closeDialog();
			this.routeDialog = true;
		},
		//绘制路径
		meshLineFn(obj) {
			console.log(JSON.stringify(obj));
			this.removeLineFn();
			if (!this.object3Dlayer) {
				this.object3Dlayer = new AMap.Object3DLayer({ zIndex: 10 });
			}
			this.map.add(this.object3Dlayer);
			var path = obj.location_point_arr.map((item) => {
				return new AMap.LngLat(item[0], item[1]);
			});
			this.meshRoute = new AMap.Object3D.MeshLine({
				path: path,
				color: 'rgba(55,129,240, 0.9)',
				width: 10,
			});
			this.addPathPoint(obj);
			this.object3Dlayer.add(this.meshRoute);
			this.scenicLineCurrent = obj;
			this.routeDialog = false;
			this.routeDetailsDialog = true;
		},
		// 添加路径点
		addPathPoint(obj) {
			obj.tour_scenic_item_arr.map((item, index) => {
				// 点标记显示内容，HTML要素字符串
				var markerContent =
					'<div style="width: 0.724638rem;height: 0.724638rem;display: flex;align-items: center;justify-content: center;font-size: .386473rem;border-radius: 50%;color:#fff;background-color: #519aff;position: relative;z-index:7;">' +
					Number(index + 1) +
					'</div>';
				var marker = new AMap.Marker({
					position: new AMap.LngLat(item.lon, item.lat),
					// 将 html 传给 content
					content: markerContent,
					// 以 icon 的 [center bottom] 为原点
					offset: new AMap.Pixel(-15, -15),
				});
				this.pathPointList.push(marker);
				this.map.add(this.pathPointList);
			});
		},
		// 移除路径
		removeLineFn() {
			if (this.meshRoute && this.object3Dlayer) {
				this.object3Dlayer.remove(this.meshRoute);
				this.meshRoute = null;

				if (this.pathPointList.length > 0) {
					this.map.remove(this.pathPointList);
					this.pathPointList = [];
				}
			}
		},
		//解说景点
		commentaryFn() {
			if (this.pointInfo.media_url.length > 0) {
				this.audioTips = true;
				this.music.src = this.pointInfo.media_url[0];

				this.music.pause();
				this.music.play();
				setTimeout(() => {
					this.describeDialog = false;
				}, 100);
			}
		},
		//关闭简介
		closePointPlay() {
			this.music.pause();
			this.audioTips = false;
		},
		//路线导航
		routePlanning() {
			this.clearWalking();
			var geolocation = new AMap.Geolocation({
				// 是否使用高精度定位，默认：true
				enableHighAccuracy: true,
				// 设置定位超时时间，默认：无穷大
				timeout: 10000,
			});
			geolocation.getCurrentPosition();
			AMap.event.addListener(geolocation, 'complete', (data) => {
				// data是具体的定位信息
				console.log(JSON.stringify(data));
				//步行导航
				this.walking = new AMap.Walking({
					map: this.map,
					isOutline: true,
				});
				//根据起终点坐标规划步行路线
				this.walking.search(
					[data.position.R, data.position.Q],
					[this.pointInfo.lon, this.pointInfo.lat],
					(status, result) => {
						// result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
						console.log(result);
						this.describeDialog = false;
						if (status === 'complete') {
							console.log('绘制步行路线完成');
						} else {
							Toast('超出景区范围');
						}
					},
				);
			});
			AMap.event.addListener(geolocation, 'error', onError);

			function onError(data) {
				// 定位出错
				Toast('获取位置信息失败，请稍后重试');
			}
		},
		//清除步行导航
		clearWalking() {
			if (this.walking) {
				this.walking.clear();
			}
		},
		// 显示页面
		showPageFn(name, isPoint) {
			this.describeDialog = false;
			setTimeout(() => {
				this.isPoint = isPoint;
				this.closeDialog();
				this.showPageName = name;
				this.isShelter = true;
			}, 200);
		},
		// 关闭页面
		closePageFn() {
			this.showPageName = '';
			this.isShelter = false;
		},
		//关闭弹出层
		closeDialog() {
			if (!this.openDescribe) {
				this.describeDialog = false;
			}
			this.routeDialog = false;
			this.routeDetailsDialog = false;
			this.openDescribe = false;
		},
		//判断JS是否加载完成
		loadScript(url, callback) {
			//循环清除所以的类
			for (var i = 0; i < document.querySelectorAll('.script_class').length; i++) {
				document
					.querySelectorAll('.script_class')
					[i].parentNode.removeChild(document.querySelectorAll('.script_class')[i]);
			}
			var script = document.createElement('script');
			script.type = 'text/javascript';
			script.async = 'async';
			script.src = url;
			script.setAttribute('class', 'script_class');
			document.body.appendChild(script);

			if (script.readyState) {
				//IE
				script.onreadystatechange = function (e) {
					if (script.readyState == 'complete' || script.readyState == 'loaded') {
						script.onreadystatechange = null;
						callback();
					}
				};
			} else {
				//非IE
				script.onload = function (e) {
					//加载完成执行回调
					callback();
				};
			}
		},
		switchTabs(id) {
			if (this.itemTypeId === id) {
				return;
			}
			Toast.loading({
				message: '加载中...',
				forbidClick: true,
			});
			this.itemTypeId = id;
			this.removeMarkerFn(); //清除点坐标
			this.clearWalking(); //关闭路线规划
			this.closePointPlay(); //关闭介绍
			this.removeLineFn(); //关闭路线
			//获取景点列表
			_api
				.api_userPortal_tourScenicItem_getListByCon({
					scenic_id: this.scenic_id || this.$route.query.tour_scenic_id,
					is_paginate: 0,
					scenic_item_type_id: this.itemTypeId,
				})
				.then((res) => {
					this.markerList = res.data;
					// 重新渲染点坐标
					this.handleMarkerFn();
					this.renderMarkerFn();
					Toast.clear();
				})
				.catch((err) => {});
		},
	},
};
</script>

<style lang="scss" scoped>
.my-swipe {
	z-index: 161;
	background-color: #fff;
	.van-swipe-item {
		box-sizing: border-box;
		font-size: 0.483092rem;
		text-align: center;
		padding: 0.241546rem 0rem;
		color: #333333;
	}
}
.select {
	color: #499bed !important;
	font-weight: 700;
}
.select-line {
	width: 0.483092rem;
	height: 0.048309rem;
	background-color: #499bed;
	bottom: -0.241546rem;
}
.bottom-button {
	padding: 0.338164rem 0.338164rem 0rem 0.338164rem;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 161;
	.box {
		width: 100%;
		height: 0.966184rem;
		background-color: #fff;
		border-radius: 0.144928rem;
		box-shadow: 0rem 0.096618rem 0.193237rem 0rem rgba(0, 0, 0, 0.08);
		.unit {
			flex: 1;
			height: 100%;
			color: #666666;
			font-size: 0.338164rem;
			font-weight: 400;
		}
	}
}
.modal {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 160;
	.dialog {
		bottom: 6vh;
		left: 0;
		right: 0;
		border-radius: 0.483092rem 0.483092rem 0px 0px;
		background-color: #fff;
		.title {
			padding: 0.410628rem 0.458937rem;
			color: #101010;
			border-bottom: 1px solid #e9e9e9;
		}
		.content {
			padding: 0.386473rem 0.531401rem 0.386473rem 0.458937rem;
			.content-img {
				width: 3.236715rem;
				height: 2.318841rem;
				img {
					width: 3.236715rem;
					height: 2.318841rem;
					object-fit: cover;
				}
			}
			.content-text {
				height: 2.318841rem;
				margin-left: 0.434783rem;
				flex: 1;
				.describe {
					color: #101010;
					font-size: 0.338164rem;
				}
				.red-button {
					width: 1.304348rem;
					height: 0.531401rem;
					background-color: #d24848;
					color: #fcf9f9;
					font-size: 0.289855rem;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 0.096618rem;
					margin-right: 0.555556rem;
				}
				.blue-button {
					width: 1.304348rem;
					height: 0.531401rem;
					background-color: #4870d2;
					color: #fcf9f9;
					font-size: 0.289855rem;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 0.096618rem;
				}
			}
		}
		.route-box {
			padding: 0.169082rem 0.676329rem 0.652174rem 0.458937rem;
			.left {
				color: #101010;
				span {
					color: #848484;
				}
			}
			.button {
				color: #f3f5fa;
				background-color: rgba(72, 112, 210, 100);
				border-radius: 0.096618rem;
				width: 1.642512rem;
				height: 0.531401rem;
			}
		}
		.title1 {
			padding: 0.410628rem 0.458937rem;
			color: #101010;
		}
		.route-line {
			white-space: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			padding-left: 0.724638rem;
			color: #666666;
			.aside-unit {
				display: flex;
				align-items: center;
				font-size: 0.338164rem;
				box-sizing: border-box;
				min-width: 1.207729rem;
				min-height: 1.207729rem;
				border-radius: 50%;
				color: #999999;
				border: 1px solid #707070;
			}
			.split-line {
				margin-bottom: 0.724638rem;
				width: 1.111111rem;
				height: 0.048309rem;
				margin-left: 0.289855rem;
				margin-right: 0.289855rem;
			}
		}
	}
}
::-webkit-scrollbar {
	width: 0 !important;
}
::-webkit-scrollbar {
	width: 0 !important;
	height: 0;
}

.ys-tabs {
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 0rem 0.676329rem;
	min-height: 1.280193rem;
	.tab-unit {
		font-size: 0.338164rem;
		color: #494949;
		padding-right: 0.966184rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		.select {
			color: #1c1b20 !important;
			font-size: 0.531401rem;
			font-weight: 700;
			z-index: 9;
		}
		img {
			width: 1.183575rem;
			height: 0.362319rem;
			position: absolute;
			bottom: -5px;
			z-index: -99;
		}
	}
}
.commentary {
	top: 1.280193rem;
	left: 0;
	background: #fff;
	right: 0;
	z-index: 160;
	height: 1.207729rem;
	border-radius: 0rem 0rem 0.241546rem 0.241546rem;
	padding: 0rem 0.555556rem;
	.text {
		color: #eb5f3e;
		margin-left: 0.169082rem;
		img {
			width: 0.289855rem;
			height: 0.289855rem;
		}
	}
}
::v-deep .hide {
	display: none;
}
::v-deep .amap-marker-content{
    div{
        color: #EB5F3E !important;
    }
}
</style>